
@charset "UTF-8";
html {-webkit-text-size-adjust:none;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td,span{padding:0;margin:0;}
body{font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Microsoft Yahei",'PingFang-SC-Medium', sans-serif; background-color: #F4F7F7;color: #222222;}
ol,ul,li{list-style:none;}
.clearfix{*zoom:1;}
.clearfix:after{content:"."; display:block;clear:both;visibility:hidden;line-height:0;height:0;}
a{color:#222222;text-decoration:none;-webkit-transition: all .2s linear;transition: all .2s linear;}
.fl{float: left;}
.fr{float: right;}
.ellipsis{text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
.mt25 {margin-top: .25rem;}
.mt20 {margin-top: .4rem;}
.m20 {margin: .2rem 0}
.mr20 {margin-right: .2rem}
.mr30 {margin-right: .3rem}
.mb0 {margin-bottom: 0;}
.mb6 {margin-bottom: .06rem;}
.mb10 {margin-bottom: .1rem;}
.mb20 {margin-bottom: .2rem;}
.wi58 {width: 5.8rem}
.cola9 {color: #a9a9a9;}
.col82 {color: #828c9b}
.col32 {color: #ff3232;}
.col35 {color: #ff3532}
.colf3 {color: #FF3333}
.col33 {color: #333333}
.col9 {color: #999999}
.col06 {color: #0066CC}
.italic {font-style: italic}
.justify{text-align: justify;}
.foinwe {font-weight: bold;}
.font18 {font-size: .36rem;}
.font16 {font-size: .32rem;}
.font24 {font-size: .48rem;}
.font14 {font-size: .28rem;}

input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color: #a39f9f;}
input:-moz-placeholder, textarea:-moz-placeholder {color:#a39f9f;}
input::-moz-placeholder, textarea::-moz-placeholder {color:#a39f9f;}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color:#a39f9f;}

@media screen and (max-width: 321px) {
    body {
        font-size:16px
    }
}

@media screen and (min-width: 321px) and (max-width:400px) {
    body {
        font-size:18px
    }
}

@media screen and (min-width: 400px) and (max-width: 500px) {
    body {
        font-size:20px
    }
}

@media screen and (min-width: 500px) {
    body {
        font-size: 22px;
        max-width: 9.4rem;
        margin: 0 auto;
    }
}
html,body {margin: 0;background: #ffffff;position: fixed;top: 0;left: 0;width: 100%;height: 100%;}
.no-js, .no-js body {height: 100%;}

/* 主容器 */
.main {width: 100%;box-sizing: border-box;height: 100%;padding-top: .3rem;overflow-y: scroll!important;overflow-x: hidden!important;}

/* 杂志块 */
.flipbook {margin: 0 auto!important;width: 6.2rem;height: 8.2rem;box-shadow:0px 0px 8px 0px rgba(0,0,0,0.5);}
.flipbook img {width: 100%;height: 100%;}

/* 跳转主目录图标 */
.catalogue {position: absolute;top: .1rem;right: .1rem;}
.catalogue img {width: .4rem;}

/* 杂志title */
.label-title {width: 100%;height: .44rem; font-size: .32rem;font-weight: bold;text-align: center;line-height: .44rem;color: #333333;margin-bottom: .2rem;}

/* 跳转工具栏 */
.skip {width: 100%;height: .6rem;line-height: .6rem;position: relative;text-align: center;margin: .3rem 0 .2rem 0;}
.skip .prev {width: 1rem;height: .6rem;border: 1px solid #cfcfcf;position: absolute;left: 2.2rem;top: 0;text-align: center;font-size: .24rem;color: #333333;border-radius: .5rem;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
.skip .next {width: 1rem;height: .6rem;border: 1px solid #cfcfcf;position: absolute;right: 2.2rem;top: 0;text-align: center;font-size: .24rem;color: #333333;border-radius: .5rem;box-sizing: border-box;display: flex;align-items: center;justify-content: center;}
.skip .first {position: absolute;left: .7rem;top: 0;font-size: .24rem;color: #333333; display: block;width: 1.36rem;height: .6rem;border: 1px solid #cfcfcf;display: flex;align-items: center;justify-content: center;border-radius: .5rem;box-sizing: border-box;}
.skip .end {position: absolute;right: .7rem;top: 0;font-size: .24rem;color: #333333;display: block;width: 1.36rem;height: .6rem;border: 1px solid #cfcfcf;display: flex;align-items: center;justify-content: center;border-radius: .5rem;box-sizing: border-box;}

/* 左右跳转工具 */
.main .tool {width: 100%;position: absolute;top: 40%;left: 50%;transform: translate(-50%,-50%); width: 100%;display: flex;align-items: center;justify-content: space-between;box-sizing: border-box;padding: 0 .2rem;}
.main .tool img {width: .22rem;height: .24rem;}

/* 缩略图 */
.breviary {width: 100%;box-sizing: border-box;padding: 0 .2rem;overflow: hidden;}
.breviary div {overflow-x: scroll;white-space: nowrap;height: 1.48rem; border: 1px solid #e6e6e6;box-sizing: border-box;padding: .06rem;overflow-y: hidden;-webkit-overflow-scrolling: touch; //有回弹效果
    -webkit-overflow-scrolling: auto; }
.breviary div::-webkit-scrollbar {display:none}
.breviary img {width: 1rem;height: 1.3rem;margin-right: .1rem;}
.breviary img:last-child {margin-right: 0;}
.breviary img.on {border: 2px solid #eb0011;box-sizing: border-box;}
.page{width:100%;height:100%;background-color:white;background-repeat:no-repeat;background-size:100% 100%;}

/* 主页目录 */
.menu {width: 100%;height: 100%; padding: .4rem .3rem .6rem .4rem;box-sizing: border-box;}
.menu .nav {width: 100%;margin-bottom: .3rem;}
.menu .nav ul {width: 100%;display: flex;align-items: center;justify-content: space-between;/* box-sizing: border-box;padding: 0 .4rem; */}
.menu .nav li {font-size: .32rem;color: #666666;line-height: .44rem;height: .5rem;border-bottom: 3px solid #ffffff;text-align: center;padding: 0 .1rem;}
.menu .nav li:last-child {margin-right: 0;}
.menu .nav li.on {color: #333333;font-weight: bold;border-bottom: 3px solid #d7000f;}
.menu .list-item {height: 100%;overflow-x: hidden;overflow-y: scroll;-webkit-overflow-scrolling: auto; -webkit-overflow-scrolling: touch;}
.menu .list-item ul {width: 100%;display: flex;align-items: center;flex-wrap: wrap;justify-content: space-between;}
.menu .list-item  ul li {width: 3.28rem;margin-bottom: .4rem;}
.menu .list-item ul li img {width: 100%;height: 4.44rem;border: 1px solid #e6e6e6;}
.menu .list-item ul li span {width: 100%;font-size: .28rem;font-weight: bold;color: #666666;text-align: center;display: block;line-height: .4rem;}

/* 缩放 */
.flipbook .zoomer .region {display:none;}
.flipbook .region.zoom {opacity:0.01;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=1)";filter: alpha(opacity=1);}
.flipbook .region.zoom:hover {opacity:0.2;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";filter: alpha(opacity=20);}
.flipbook .zoom-in .even .gradient,
.flipbook .zoom-in .odd .gradient {display:none;}
.flipbook .zoom-in .next-button,
.flipbook .zoom-in .previous-button {display:none;}
.zoom-icon {position:absolute;z-index: 1000;width: .44rem;height: .44rem;top: .2rem;right: .2rem;background-image:url(../image/zoom-icons.png);background-size: 1.76rem .44rem;}

.zoom-icon-in{
	background-position:0 0;
	cursor: pointer;
}

.zoom-icon-in.zoom-icon-in-hover{
	background-position:-.88rem 0;
	cursor: pointer;
}

.zoom-icon-out{
	background-position:-.88rem 0;
}

.zoom-icon-out.zoom-icon-out-hover{
	background-position:-1.32rem 0;
	cursor: pointer;
}